<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<script type="text/javascript">
$(function(){
	/* 生成JQGrid表格 */
	$('#list').jqGrid({
		//Ajax请求地址
		url : 'superbosswy/cxzh/list',
		//编辑请求头
		editurl:'superbosswy/edit',
		//表头名称
		caption:'班级列表',
		//设置jqgrid的全局样式为bootstrap样式
		/* styleUI: 'Bootstrap', */
		//斑马线，斑马线css样式需自己定义 如下
		altRows:true,
		altclass:'aaa',
		//宽度自适应，根据父容器适应宽度
		autowidth:true,
		//表宽1000 表高自动
		/* width:1000, */
		height:'auto',
		//接受的数据的数据类型
		datatype:'json',
		//请求方式
		mtype:'post',
		//每页显示行数
		rowNum:10,
		//可调整每页显示行数
		rowList:[3,5,10,15,25,50],
		//定义serch筛选搜索参数名，不定义默认的发送的是_searh 在spring里无法接收
		prmNames : { search : 'search' },
		//指定排序字段名称
		sortname:'id',
		//是否显示总的记录条数
		viewrecords:true,
		//开启导航栏，指定导航栏容器
		pager:'#dhl',
		//如何解析从Server端发回来的json数据
		jsonReader:{
			repeatitems:false,
			id:'id'
		},
		/* name取json里面对应的值 
		lable列的名称 
		index是根据什么字段排序 
		sorttype排序数据类型，如果根据该值排序，发送他的数据类型
		editable表示编辑时该值可修改 */
		colModel:[
			{name:'id',label:'序号',index:'id',align:'center',width:50,sorttype:'int'},
			{name:'boos.danwei',label:'租户名称',index:'boos.danwei',align:'center',width:50,sorttype:'Boos',editable:true,search:false},
			{name:'boos.phone',label:'联系方式',index:'boos.phone',align:'center',width:150,sorttype:'Boos',editable:true,search:false},
			{name:'boos.dzfpNum',label:'管理发票数量',index:'boos.dzfpNum',align:'center',width:150,sortttype:'Boos',editable:true,search:false},
			{name:'overDate',label:'授权截至时间',index:'overDate',align:'center',width:100,formatter:"date",editrules:{required: true,date:true}, formatoptions: {newformat:'Y-m-d'},align:'center',width:100,sorttype:'Date',editable:true
				,editoptions:{
	                dataInit:function(e){
	                laydate.render({
            			elem: e //指定元素
                	});
                    $(this).click(function(e){//选中时间后隐藏
                        $(e).parent().datepicker('hide');
                    });
                }
            }},
			{name:'startmoney',label:'缴费金额',index:'startmoney',align:'center',width:100,sorttype:'Double',formatter:"double",editable:true},
		]
	});
	/* 生成JQGrid导航栏 */
	$('#list').jqGrid('navGrid','#dhl',{edit:false,edittext : "编辑",add:false,addtext : "新增",del:false,deltext : "删除",view:true,viewtext : "查看",refresh:true,refreshtext : "刷新",search:true,searchtext : "搜索"},{
		//样式顺序规定：改==>增==>删==>查==>视图（不可改变）	
		//top和left表示弹框弹出来的初始定位宽高
		top:220 ,left:600 ,
		//closeOnEscape表示按esc关闭弹框
		closeOnEscape: true
	},{
		top:220 ,left:600 ,
		closeOnEscape: true
	},{
		top:220 ,left:600 ,
		closeOnEscape: true
	},{
		top:220 ,left:600 ,
		closeOnEscape: true,
		multipleSearch: true
	},{
		top:220 ,left:600 ,
		closeOnEscape: true
	});
});
	//执行一个laydate实例
	laydate.render({
	  elem: '#a',
	  type: 'date'//指定元素
	});
</script>
<style type="text/css">
	.aaa{
		background: #eee;
	}
</style>
	<div align="center">
		<div style="margin: 0px auto;">
			<table id="list"></table>
		</div>
	</div>
	<div id="dhl"></div>